<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    .box{
        width: 790px;
        height: 340px;
        position: relative;
        margin: 100px auto;
    }
    ul {
        list-style: none;
    }
    .box .uu li{
        position: absolute;
        top: 0;
        left: 0;
    }
    .choose {
        position: absolute;
        top: 50%;
        left: 0;
        width: 790px;
    }
    .choose a{
        position: absolute;
        top: 0;
        color: white;
        width: 30px;
        height: 30px;
        background-color: #333333;
        font-size: 30px;
        text-decoration: none;
        line-height: 30px;
        text-align: center;

    }
    #left{
        left: 20px;
    }
    #right{
        right: 20px;
    }
    .dian{
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -100px;

    }
    .dian ul{
        height: 30px;
        width: 200px;
        background-color: rgba(0,0,0,0.5);
        border-radius: 10px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-evenly;
        align-items: center;
    }
    .dian li {
        cursor: pointer;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #fff;
    }

</style>
<body>

<div class="box">
    <ul class="uu">
        <li class="current"><img src="images/1.jpg" alt=""></li>
        <li class=""><img src="images/2.jpg" alt=""></li>
        <li class=""><img src="images/3.jpg" alt=""></li>
        <li class=""><img src="images/4.jpg" alt=""></li>
        <li class=""><img src="images/5.jpg" alt=""></li>
        <li class=""><img src="images/6.jpg" alt=""></li>
        <li class=""><img src="images/7.jpg" alt=""></li>
        <li class=""><img src="images/8.jpg" alt=""></li>
    </ul>
    <div class="choose">
        <a href="javascript:;" id="left">&lt;</a>
        <a href="javascript:;" id="right">&gt;</a>
    </div>
    <div class="dian">
        <ul class="dian-uu">

        </ul>
    </div>
</div>

<script src="../jquery-1.12.2.js"></script>
<script>
    $(function () {
        let flag=0;
        //动态创建圆点
        for(let i=0;i<$(".uu>li").length;i++){
            $("<li id="+i+"></li>").appendTo($(".dian-uu")).mouseenter(function () {
                $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","white");
                flag=$(this).attr("id");
                $(".uu>li").eq(flag).fadeIn(200).siblings("li").fadeOut();
            });
        }
        $(".dian-uu>li").eq(flag).css("backgroundColor","red").siblings("li").css("backgroundColor","white");
        $(".uu>li").eq(flag).fadeIn(200).siblings("li").fadeOut();


        //右边按钮点击
        $("#right").click(function () {
            autoShow();
        });
        //左边按钮点击
        $("#left").click(function () {
            flag--;
            if(flag<0){
                flag=($(".uu>li").length)-1;
            }
            $(".dian-uu>li").eq(flag).css("backgroundColor","red").siblings("li").css("backgroundColor","white");
            $(".uu>li").eq(flag).fadeIn(200).siblings("li").fadeOut();
        });

        //自动播放
        function autoShow() {
            flag++;
            if(flag>$(".uu>li").length-1){
                flag=0;
            }
            $(".dian-uu>li").eq(flag).css("backgroundColor","red").siblings("li").css("backgroundColor","white");
            $(".uu>li").eq(flag).fadeIn(500).siblings("li").fadeOut();

        }

        //自动轮播
        let t = setInterval(autoShow, 2000);
        //鼠标进入div事件
        $(".box").mouseenter(function () {
            window.clearInterval(t);
        }).mouseleave(function () {
            t = setInterval(autoShow, 1000);
        });


    });

</script>
</body>
</html>